<template>
    <div class="main goods-service-list">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="showAdd">新建</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="标题" prop="title" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="内容" prop="content" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog :title="formData.id ? '编辑' : '新建'" :visible.sync="showEditPop">
                <el-form :model="formData" :rules="formRule" size="medium" ref="form" label-width="100px">
                    <el-form-item label="标题:" prop="title">
                        <el-input v-model="formData.title" placeholder="标题" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item label="内容:" prop="content">
                        <el-input type="textarea" v-model="formData.content"></el-input>
                        <!--<tinymce :height="600" v-model="formData.content"></tinymce>-->
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                    <el-button @click="showEditPop = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>

<script>
    import Tinymce from '@/components/Tinymce'
    export default {
        name: 'goodsService',
        components: {
            Tinymce
        },
        data() {
            return {
                listQuery: {
                    pageIndex: 1,
                    pageSize: 10,
                    isPage: 1
                },
                list: [],
                listTotal: 0,
                formData: {
                    title: '',
                    content: ''
                },
                formRule: {
                    title: [{required: true, message: '请输入标题', trigger: 'change'}],
                    content: [{required: true, message: '请输入内容', trigger: 'change'}]
                },
                showEditPop: false,
                btnLoading: false
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-manage/goodsService/list',
                    method: 'get',
                    params: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            handleSizeChange (value) {
                this.listQuery.pageSize = value
                this.getList()
            },
            handleCurrentChange(val){
                this.listQuery.pageIndex = val;
                this.getList();
            },
            // 新建
            showAdd() {
                this.formData = {
                    title: '',
                    content: '',
                };
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.showEditPop = true;
                this.btnLoading = false;
            },
            // 编辑
            showEdit(row) {
                this.formData = Object.assign({}, row);
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.showEditPop = true;
                this.btnLoading = false;
            },
            // 保存
            save() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.formData.id ? '/bsnl-manage/goodsService/update' : '/bsnl-manage/goodsService/create';
                    this.btnLoading = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnLoading = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnLoading = false;
                    });
                });
            }
        }
    }
</script>
